<template>
	<view class="dw">
		<view class="dw1">
			<image src="../../static/1(1).png" mode=""style="width: 70rpx; height: 70rpx; margin-top: 25rpx; margin-left: 40rpx;"><span style="position: relative; top:-40rpx;color: red;">________________</span></image>
			<image src="../../static/2(1).png" mode=""style="width: 70rpx; height: 70rpx; margin-top: 25rpx;"><span style="position: relative; top:-40rpx;color: red;">________________</span></image>
			<image src="../../static/3(1).png" mode=""style="width: 70rpx; height: 70rpx; margin-top: 25rpx;"></image>
			<p style="margin-left: 20rpx;">选择商品</p>
			<p style="margin-left: 290rpx;margin-top: -34rpx;">邀请好友</p>
			<p style="margin-left: 550rpx;margin-top: -34rpx;">人满成团</p>
			<p style="margin-left: 20rpx; font-size: 10rpx;color: lightgray;">开团/参团</p>
			<p style="margin-left: 300rpx;margin-top: -34rpx;font-size: 10rpx;color: lightgray;">好友参团</p>
			<p style="margin-left: 562rpx;margin-top: -34rpx;font-size: 10rpx;color: lightgray;">门店提货</p>
		</view>
		<view class="dw2">
			<p style="margin-left: 20rpx;margin-top: 20rpx;font-weight: bold;">门店自提</p>
			<image src="../../static/3 (1)(1).png" mode="" style="width: 70rpx;height: 70rpx;margin-top: 10rpx;margin-left: 25rpx;">
				<p style="margin-left: 130rpx;margin-top: -80rpx;">幸福集市北山店</p>
				<p style="margin-left: 130rpx;margin-bottom: 10px;color: lightgray;">门店营业时间 8:00~18:00</p>
				<p style="margin-left: 550rpx;margin-top: -70rpx;">切换门店</p>
				<view class="dw3">></view>
			</image>
			<image src="../../static/定位(1).png" mode="" style="width: 70rpx; height: 70rpx;margin-top: 15rpx;margin-left: 25rpx;">
				<p style="margin-left: 130rpx;margin-top: -80rpx;" @tap="map()">南山区科苑路15号科兴科学园</p>
				<p style="margin-left: 130rpx;color: lightgray;">联系电话 00102405222</p>
			</image>
			<image src="../../static/217时间(1).png" mode=""style="width: 60rpx;height: 60rpx;margin-left: 30rpx;margin-top: 10rpx;">
				<p style="margin-left: 130rpx;margin-top: -60rpx;">自提地点时间年月</p>
				<view class="dw4">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
										<view class="uni-input">{{time}}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
										<view class="uni-input">{{date}}</view>
									</picker>
								</view>
							</view>
						</view>
				</view>
			</image>
		</view>
		<view class="list" style="margin-bottom:10px;" v-for="item,index in list" :key='index'>
			<view style="display: flex; width: 90%;
			height: 188rpx; background-color: white;
			padding: 10rpx; margin-top: 65rpx;margin: auto;">
				<image :src="item.timesUrl"
				style="width: 100px; height: 100%;" mode=""></image>
				<view style="width: 43%;
    margin-left: 29px;">
					<view style="font-size: 12px;">{{item.timeText3}}</view>
					<view style="font-size: 37rpx; color: red; margin-top: 8rpx;">￥{{item.price}}</view>
				</view>
				<view style=" margin-top: 88rpx;">数量:{{item.num}}</view>
			</view>
			<view style="width: 90%; display: flex;
			justify-content: space-between;
			height: 65rpx; 
			line-height: 65rpx;margin: auto;">
				<view>备注信息</view>
				<view style="color: lightgray;">输入备注信息</view>
			</view>
		</view>
		<view class="dw6" style="display: flex;
		justify-content: space-between;
		position: fixed; bottom: 0px; width: 100%;
		height: 50px; background-color: aliceblue;">
			<div style="color: red; font-size: 20px;
			line-height: 53px; margin-left: 10px;">￥{{toul}}</div>
			<div style="width: 120px; height: 50px;
			line-height: 50px; text-align: center;
			background-color: red; color: aliceblue;">立即支付</div>
		</view>
	</view>
</template>
<script>
export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            title: 'picker',
            array: ['中国', '美国', '巴西', '日本'],
            index: 0,
            date: currentDate,
            time: '12:01',
			list:[],
			toul:''
        }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
	onUnload() {
		uni.$off('pink')
	},
	onLoad() {
		let that=this
		uni.$on('pink',data=>{
			that.list=data
			console.log(that.list);
		})
	},
    methods: {
		total() {
			this.totalNum = 0;
			this.totalPrice = 0
			this.cartList.forEach((item) => {
				item.flag ? (this.totalNum += item.num) : (this.totalNum += 0)
				item.flag ? (this.totalPrice += item.num * item.price) : (this.totalPrice += 0);
			})
		},
		map(){
			uni.navigateTo({
				url:"../about/map"
			})
		},
        bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.index = e.detail.value
        },
        bindDateChange: function(e) {
            this.date = e.detail.value
        },
        bindTimeChange: function(e) {
            this.time = e.detail.value
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
    }
}
</script>

<style>
	.dw{
		width: 98%;
		height: 1200rpx;
		margin: auto;
		background-color: whitesmoke;
	}
	.dw1{
		height: 190rpx;
		
		
	}
	.dw2{
		height: 350rpx;
		background-color: white;
		width: 86%;
		margin: auto;
		margin-bottom: 15px;
		padding: 10px;
		
		
		
	}
	.dw3{
		margin-left: 665rpx;
		margin-top: -40rpx;
		height: 60rpx;
		color: lightgray;
	}
	.dw4{
		margin-left: 430rpx;
		margin-top: -37rpx;
		color: red;
		margin-top: -50rpx;
	}
	.dw5{
		height: 500rpx;
		border: 1rpx solid yellow;
	}
</style>